<template>
  <div class="login-wrap">
    <div class="box_login">
      <el-form
        class="login-container"
        ref="form"
        :model="form"
        :rules="rules"
        @submit.native.prevent
      >
        <h1 class="title">公会登陆</h1>
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="form.username"
            placeholder="公会账号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="form.password"
            placeholder="验证码"
            autocomplete="off"
            show-password
          >
            <span slot="suffix" style="color: #409eff" v-show="codeTime"
              >倒计时{{ codeTime }}秒</span
            >
          </el-input>
        </el-form-item>
        <el-button type="text" @click="sendCode">发送验证码</el-button>
        <el-form-item>
          <el-button type="primary" @click="doLogin" style="width: 100%"
            >登陆</el-button
          >
        </el-form-item>
        <el-row style="text-align: center; margin-top: -10px"> </el-row>
      </el-form>
      <!-- 滑动验证 -->
      <!-- <slide-verify
        :l="42"
        :r="10"
        :w="422"
        :h="240"
        slider-text="向右滑动"
        @success="onSuccess"
        v-show="slide_verify_flag"
        ref="slideblock"
      ></slide-verify> -->
    </div>
    <Back></Back>
  </div>
</template>
 
<script>
import Back from "@/components/back.vue";
import Rsa from "@/assets/js/rsa";
export default {
  name: "Login",
  components: { Back },
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: {
          required: true,
          message: "请输入账号",
          trigger: "blur",
        },
        password: {
          required: true,
          message: "请输入验证码",
          trigger: "blur",
        },
      },
      codeTime: 0,
      slide_verify_flag: false,
      setInt: "",
    };
  },
  methods: {
    sendCode() {
      let that = this;
      let params = {
        mobile: this.form.username,
        captcha: "1234",
        captcha_uuid: "1234",
      };
      if (this.codeTime == 0) {
        if (this.form.username) {
          this.$api
            .send_code(params)
            .then((res) => {
              console.log(res, "--------验证码");
              if (res.code == 200) {
                this.$message.success("验证码发送成功");
                this.codeTime = 30;
                this.setInt = setInterval(() => {
                  that.codeTime--;
                  if (that.codeTime < 0) {
                    that.codeTime = 0;
                    that.setInt = null;
                    return false;
                  }
                }, 1000);
              }
            })
        } else {
          this.$message.warning("请填写手机号");
        }
      } else {
        this.$message.warning("倒计时还未结束");
      }
    },
    doLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.onSuccess();
          // this.slide_verify_flag = true;
        } else {
          return false;
        }
      });
    },
    // 登录
    onSuccess() {
      let params = {
        mobile: this.form.username.trim(),
        code: this.form.password.trim(),
      };

      this.$api
        .login(params)
        .then((res) => {
          console.log(res, "----------");
          if (res.code == 200) {
            sessionStorage.setItem("user", JSON.stringify(res.data));
            this.$router.push("/menu");
          }
        })
        .catch((err) => {
          console.log(err, "====登录错误");
        });
    },
  },
};
</script>
 
<style lang="less" scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  // background-image: url("@/assets/img/background.svg");
  background-color: #112346;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
  .box_login {
    z-index: 9;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    .login-container {
      border-radius: 10px;
      margin: 0px auto;
      width: 350px;
      padding: 30px 35px 15px 35px;
      background: #fff;
      border: 1px solid #eaeaea;
      text-align: left;
      box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    }

    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }

    .slide-verify {
      top: -274px;
      left: 50%;
      transform: translate(-50%, -8%);
      z-index: 10;
      background-color: #fff;
    }
  }
}
</style>